<template>
  <div class="personal-info-container">
    <div class="content-wrapper">
      <div class="info-card">
        <div class="card-header">
          <h2>管理员信息</h2>
          <el-button type="primary" @click="handleEdit" :icon="Edit">
            {{ isEditing ? '保存' : '编辑' }}
          </el-button>
        </div>
        <el-form :model="adminInfo" label-width="100px" :disabled="!isEditing">
          <div class="avatar-section">
            <el-avatar
              :size="120"
              :src="adminInfo.avatar"
              @error="handleAvatarError"
            >
              <img
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
              />
            </el-avatar>
            <el-upload
              v-if="isEditing"
              class="avatar-uploader"
              action="/api/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <el-button type="primary" class="upload-btn">更换头像</el-button>
            </el-upload>
          </div>

          <el-form-item label="用户名">
            <el-input v-model="adminInfo.username" />
          </el-form-item>

          <el-form-item label="管理员角色">
            <el-tag
              v-for="role in adminInfo.roles"
              :key="role"
              class="role-tag"
              effect="plain"
            >
              {{ role }}
            </el-tag>
          </el-form-item>

          <el-form-item label="个人简介">
            <el-input
              v-model="adminInfo.bio"
              type="textarea"
              :rows="4"
              placeholder="请输入个人简介"
            />
          </el-form-item>

          <el-form-item label="账号状态">
            <el-tag
              :type="adminInfo.status === 'active' ? 'success' : 'danger'"
            >
              {{ adminInfo.status === 'active' ? '正常' : '禁用' }}
            </el-tag>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Edit } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const isEditing = ref(false)
const adminInfo = ref({
  username: 'xxx',
  avatar: '',
  roles: ['超级管理员', '系统管理员'],
  bio: '这里是管理员简介...',
  status: 'active'
})

const handleEdit = () => {
  if (isEditing.value) {
    // 保存逻辑
    ElMessage.success('保存成功')
  }
  isEditing.value = !isEditing.value
}

const handleAvatarError = () => {
  ElMessage.error('头像加载失败')
}

const handleAvatarSuccess = (res) => {
  adminInfo.value.avatar = res.url
  ElMessage.success('头像上传成功')
}

const beforeAvatarUpload = (file) => {
  const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
  const isLt2M = file.size / 1024 / 1024 < 2

  if (!isJPG) {
    ElMessage.error('头像只能是 JPG 或 PNG 格式!')
  }
  if (!isLt2M) {
    ElMessage.error('头像大小不能超过 2MB!')
  }
  return isJPG && isLt2M
}
</script>

<style lang="scss" scoped>
.personal-info-container {
  min-height: 100vh;
  background-color: #f8f8fb;

  .content-wrapper {
    padding: 32px;
    max-width: 1200px;
    margin: 0 auto;
  }

  .info-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 4px 24px rgba(115, 103, 240, 0.08);

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 32px;
      padding-bottom: 16px;
      border-bottom: 2px solid #f8f8fb;

      h2 {
        font-size: 24px;
        color: #1e1e2d;
        font-weight: 600;
        margin: 0;
        background: linear-gradient(135deg, #7367f0 0%, #9f94ff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    .avatar-section {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 32px;

      .el-avatar {
        margin-bottom: 16px;
        border: 4px solid rgba(115, 103, 240, 0.1);
        transition: all 0.3s ease;

        &:hover {
          transform: scale(1.05);
          box-shadow: 0 4px 24px rgba(115, 103, 240, 0.15);
        }
      }

      .upload-btn {
        background: linear-gradient(135deg, #7367f0 0%, #9f94ff 100%);
        border: none;
        padding: 8px 16px;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 16px rgba(115, 103, 240, 0.3);
        }
      }
    }

    .el-form {
      max-width: 600px;
      margin: 0 auto;

      .el-form-item {
        margin-bottom: 24px;

        :deep(.el-form-item__label) {
          font-weight: 500;
          color: #1e1e2d;
        }

        :deep(.el-input__inner) {
          border-radius: 8px;
          border-color: #e2e2e2;

          &:focus {
            border-color: #7367f0;
            box-shadow: 0 0 0 2px rgba(115, 103, 240, 0.1);
          }
        }
      }
    }

    .role-tag {
      margin-right: 8px;
      margin-bottom: 8px;
      background: rgba(115, 103, 240, 0.1);
      border-color: transparent;
      color: #7367f0;
      padding: 6px 12px;
      border-radius: 6px;
    }
  }
}
</style>
